<template>
  <view class="row-center">
    <view
      v-if="data.status === KKConversationStatus.success || data.status === ''"
      class="converstionAudio"
      :class="{
        converstionAudioOther: data.from === KKConversationFrom.other,
      }"
    >
      <KKAudio class="converstionAudio-auido" :data="data" />
    </view>
    <view v-else class="converstionAudioLoading"></view>
  </view>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";
import { KKConversationFrom, KKConversationStatus } from "./conversitonEnum";
import KKAudio from "@/pagesA/components/kkAudio/index.vue";

const props = defineProps({
  data: {
    type: Object,
    default: {},
  },
});
</script>

<style lang="scss" scoped>
.converstionAudio {
  width: 478rpx;
  height: 84rpx;
  border-radius: 38rpx 8rpx 38rpx 38rpx;
  background: linear-gradient(89deg, #3d8eff 0%, #7835ff 100%);
  display: flex;
  flex-direction: row;
  align-items: center;

  &-auido {
    width: calc(100% - 48rpx);
    margin-left: 24rpx;
    margin-right: 24rpx;
  }
}
.converstionAudioOther {
  width: 478rpx;
  height: 84rpx;
  border-radius: 8rpx 38rpx 38rpx 38rpx;
  background: #fff;
}

.converstionAudioLoading {
  width: 331rpx;
  height: 84rpx;
  background: linear-gradient(262deg, #3d8eff 0%, #7835ff 100%);
  border-radius: 40rpx 8rpx 40rpx 40rpx;
  opacity: 0.4;
}
</style>
